<template>
  <el-header>
    <div class="header-container">
      <div class="logo">
        <el-icon><shopping-cart /></el-icon>
        <span class="title">买卖网</span>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">

          <el-menu-item index="1" @click="this.$router.push('/user')">首页</el-menu-item>
          <el-menu-item index="2" @click="this.$router.push('/goods')">商品</el-menu-item>
          <el-menu-item index="3" @click="this.$router.push('/about')">关于我们</el-menu-item>


      </el-menu>

    </div>
  </el-header>
</template>

<script>
import { ElIcon, ElMenu, ElMenuItem, ElHeader, ElInput, ElDropdown, ElDropdownMenu, ElDropdownItem, ElAvatar } from 'element-plus';
import { ShoppingCart, Search } from '@element-plus/icons-vue';
import router from "@/router/index.js";

export default {
  name: 'Header',
  methods: {
    router() {
      return router
    }
  },
  components: {
    ElIcon,
    ElMenu,
    ElMenuItem,
    ElHeader,
    ElInput,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElAvatar,
    ShoppingCart,
    Search,
  },
  data() {
    return {
      activeIndex: '1',
    };
  },
};
</script>

<style scoped>
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.logo {
  display: flex;
  align-items: center;
}

.logo .title {
  font-size: 24px;
  margin-left: 10px;
}

.el-menu-demo {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.search-input {
  margin-right: 20px;
}

.el-dropdown-link {
  cursor: pointer;
}
</style>
